<template>
  <div class="airspaceApplication">
    <div class="container">
      <div class="search-card">
        <div class="search-argument">
          <!-- 空域申请编号 -->
          <div class="search-item">
            <span class="labelName">{{ $t("flyTask.AirspaceCode") }}</span>
            <el-input
              clearable
              v-model="params.airspaceApplyCode"
              class="search-input"
              style="width: 270px; height: 40px"
              maxlength="30"
              :placeholder="$t('placeholder.AirspaceCode')"
            ></el-input>
          </div>
          <!-- 申请人 -->
          <div class="search-item">
            <span class="labelName">{{ $t("flyTask.applicant") }}</span>
            <el-input
              clearable
              v-model="params.applyName"
              class="search-input"
              style="width: 270px; height: 40px"
              maxlength="30"
              :placeholder="$t('flyTask.applicantDesc')"
            ></el-input>
          </div>
          <!-- 电话 -->
          <div class="search-item">
            <span class="labelName">{{ $t("flyTask.mobile") }}</span>
            <el-input
              clearable
              v-model="params.mobile"
              class="search-input"
              style="width: 270px; height: 40px"
              maxlength="30"
              :placeholder="$t('placeholder.mobile')"
            ></el-input>
          </div>
          <!-- 航空器型号 -->
          <div class="search-item">
            <span class="labelName">{{ $t("flyTask.aircraft") }}</span>
            <el-input
              clearable
              v-model="params.aircraftId"
              class="search-input"
              style="width: 270px; height: 40px"
              maxlength="30"
              :placeholder="$t('placeholder.aircraft1')"
            ></el-input>
          </div>
          <!-- 任务性质 -->
          <div class="search-item">
            <span class="labelName">{{ $t("flyTask.TaskNature") }}</span>
            <el-select
              clearable
              v-model="params.taskName"
              class="search-input"
              style="width: 270px; height: 40px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in task_nature"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </div>
          <!-- 审核状态 -->
          <div class="search-item">
            <span class="labelName">{{ $t("flyTask.AuditStatus") }}</span>
            <el-select
              clearable
              v-model="params.approvalStatus"
              class="search-input"
              style="width: 270px; height: 40px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in approvalStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <!-- 是否涉及管控区 -->
          <div class="search-item">
            <span class="labelName">{{ "是否涉及管控区" }}</span>
            <el-select
              clearable
              v-model="params.focus"
              class="search-input"
              style="width: 270px; height: 40px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in airspace_focus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <!-- 申请人类型 -->
          <div class="search-item">
            <span class="labelName">{{ "申请人类型" }}</span>
            <el-select
              clearable
              v-model="params.applyType"
              class="search-input"
              style="width: 270px; height: 40px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in apply_Type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <!-- 申请时间 -->
          <div class="search-item">
            <span class="labelName">{{ $t("flyTask.ApplyTime") }}</span>
            <el-date-picker
              clearable
              v-model="params.applyTime"
              class="search-time"
              style="width: 270px; height: 40px"
              type="datetimerange"
              format="YYYY-MM-DD HH:mm"
              range-separator="至"
              unlink-panels
              :default-time="defaultTime"
              :start-placeholder="$t('flyTask.startTime')"
              :end-placeholder="$t('flyTask.endTime')"
            />
          </div>

          <!-- 搜索按钮 -->
          <div class="search-button">
            <el-button
              :loading="loading"
              class="btn search"
              @click="getApplyList"
              ><el-icon class="icon" color="#fff"> <Search /> </el-icon
              >{{ $t("common.search") }}</el-button
            >
            <el-button class="btn reset" @click="resetSearch">
              <el-icon class="icon" color="#fff"> <Refresh /> </el-icon
              >{{ $t("common.reset") }}
            </el-button>
          </div>
        </div>
        <div class="batch-operation">
          <el-button
            class="btn search"
            @click="addNewVisible = !addNewVisible"
            v-hasPermi="['airTask:airspace:add']"
          >
            <el-icon class="icon"> <Plus /> </el-icon
            >{{ $t("flyTask.AddApply") }}
          </el-button>
          <el-button
            v-if="!isBatchDeletion"
            class="btn cantUse"
            v-hasPermi="['airTask:airspace:remove']"
          >
            <el-icon class="icon"> <Delete /> </el-icon
            >{{ $t("common.BatchDeletion") }}
          </el-button>
          <el-button
            v-else
            class="btn remove"
            @click="deletePrompt()"
            v-hasPermi="['airTask:airspace:remove']"
          >
            <el-icon class="icon"> <Delete /> </el-icon
            >{{ $t("common.BatchDeletion") }}
          </el-button>
        </div>
      </div>

      <!-- 表格数据 -->
      <el-table
        v-loading="loading"
        :data="applyList"
        class="codeTable"
        max-height="52vh"
        stripe
        :border="true"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
          :fixed="true"
        />
        <!-- 序号 -->
        <el-table-column
          type="index"
          :label="$t('flyTask.SerialNum')"
          :index="indexMethod"
          width="85"
          align="center"
          :fixed="true"
        />
        <!-- 操作 -->
        <el-table-column
          :label="$t('flyTask.operate')"
          align="center"
          min-width="200"
          :fixed="true"
        >
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              @click="
                createNewApplication(
                  row.applyType,
                  'detail',
                  row.airspaceApplyId
                )
              "
              v-hasPermi="['airTask:airspace:detail']"
              >{{ $t("common.detail") }}</el-button
            >

            <el-button
              link
              type="primary"
              v-if="row.approvalStatus === 0"
              @click="
                createNewApplication(row.applyType, 'edit', row.airspaceApplyId)
              "
              v-hasPermi="['airTask:airspace:edit']"
              >{{ $t("common.edit") }}</el-button
            >

            <el-button
              link
              type="primary"
              v-if="row.approvalStatus === 0"
              @click="
                createNewApplication(
                  row.applyType,
                  'approval',
                  row.airspaceApplyId
                )
              "
              v-hasPermi="['airTask:airspace:approval']"
              >{{ $t("common.approval") }}</el-button
            >

            <el-button
              link
              type="danger"
              v-if="row.approvalStatus === 0"
              @click="deletePrompt(row.airspaceApplyId)"
              v-hasPermi="['airTask:airspace:remove']"
              >{{ $t("common.delete") }}</el-button
            >
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column
          :label="$t('flyTask.status')"
          align="center"
          width="120"
          :fixed="true"
        >
          <template #default="{ row }">
            <span class="tag warning" v-if="row.approvalStatus === 0">{{
              $t("flyTask.reviewing")
            }}</span>
            <span class="tag success" v-if="row.approvalStatus === 1">{{
              $t("flyTask.passed")
            }}</span>
            <span class="tag info" v-if="row.approvalStatus === 2">{{
              $t("flyTask.fail")
            }}</span>
          </template>
        </el-table-column>

        <!-- 空域申请编号 -->
        <el-table-column
          :label="$t('flyTask.AirspaceCode')"
          prop="airspaceApplyCode"
          :show-overflow-tooltip="true"
          min-width="200"
          align="center"
        />
        <!-- 申请人 -->
        <el-table-column
          :label="$t('flyTask.applicant')"
          prop="applyName"
          :show-overflow-tooltip="true"
          min-width="150"
          align="center"
        />
        <!-- 申请主题 -->
        <el-table-column
          :label="$t('flyTask.theme')"
          prop="themeName"
          :show-overflow-tooltip="true"
          min-width="150"
          align="center"
        />
        <!-- 序列号 -->
        <el-table-column
          :label="$t('flyTask.SNNo')"
          :show-overflow-tooltip="true"
          min-width="200"
          align="center"
        >
          <template #default="{ row }">
            <el-dropdown trigger="click">
              <div>
                <span>{{
                  row.showSN
                    ? `${row.deviceModelList[0]} ${row.aircraftIdList[0]}`
                    : row.deviceModelList[0]
                }}</span>
                <span
                  v-if="row.deviceModelList.length > 1"
                  style="margin-left: 10px"
                  @click="showDrone()"
                  ><img src="/img/cockpit/downDrap.png"
                /></span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="(item, index) in row.deviceModelList"
                    :key="item"
                    >{{
                      row.showSN
                        ? `${item}  ${row.aircraftIdList[index]}`
                        : item
                    }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <!-- 任务性质 -->
        <el-table-column
          :label="$t('flyTask.TaskNature')"
          prop="taskName"
          :show-overflow-tooltip="true"
          min-width="150"
          align="center"
        />
        <!-- 飞行时段 -->
        <el-table-column
          :label="$t('flyTask.EffectivePeriod')"
          align="center"
          :show-overflow-tooltip="true"
          min-width="200"
        >
          <template #default="{ row }">
            <span>{{ row.startTime + " ~ " + row.endTime }}</span>
          </template>
        </el-table-column>
        <!-- 飞行模式 -->
        <el-table-column
          :label="$t('flyTask.FlightMode')"
          align="center"
          :show-overflow-tooltip="true"
          min-width="120"
        >
          <template #default="{ row }">
            <span v-if="row.flightMode === 0">{{
              $t("flyTask.withinVR")
            }}</span>
            <span v-else-if="row.flightMode === 1">{{
              $t("flyTask.beyondVR")
            }}</span>
            <span v-else>{{ "--" }}</span>
          </template></el-table-column
        >
        <!-- 操作模式 -->
        <el-table-column
          :label="$t('flyTask.OperationMode')"
          align="center"
          :show-overflow-tooltip="true"
          min-width="100"
        >
          <template #default="{ row }">
            <span v-if="row.operatorMode === 0">{{
              $t("flyTask.remoteFlight")
            }}</span>
            <span v-else-if="row.operatorMode === 1">{{
              $t("flyTask.autoFlight")
            }}</span>
            <span v-else>{{ "--" }}</span>
          </template></el-table-column
        >

        <!-- 申请时间 -->
        <el-table-column
          :label="$t('flyTask.ApplyTime')"
          :show-overflow-tooltip="true"
          align="center"
          min-width="180"
        >
          <template #default="{ row }">
            <span>{{ dataFormat(row.createTime, "YYYY-MM-DD HH:mm") }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="params.pageNum"
        v-model:limit="params.pageSize"
        @pagination="getApplyList"
        class="pagination"
      />

      <!-- 新增弹窗 -->
      <el-dialog v-model="addNewVisible" class="apply-dialog">
        <div class="createOption" @click="createNewApplication(0, 'add')">
          <div class="person"></div>
          <div class="title">个人申请</div>
        </div>
        <div class="createOption" @click="createNewApplication(1, 'add')">
          <div class="company"></div>
          <div class="title">机构申请</div>
        </div>
      </el-dialog>

      <!-- 删除弹窗 -->
      <el-dialog v-model="deleteVisible" class="no-header-dialog">
        <img src="@/assets/images/warn.png" alt="" />
        <div class="dec">
          {{ $t("flyTask.deleteFlyPlan") }}
          <span class="deletecolor">空域申请</span>
          ？
        </div>
        <div class="chooise">
          <div class="btn delete" @click="closeDelete">取消</div>
          <div class="btn success" @click="deleteApply">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "AirspaceApplication",
};
</script>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import {
  getAirApplyListApi,
  deleteApplyApi,
} from "@/api/flightTask/airspaceApply";
import useFlightTaskStore from "@/store/modules/flightTask";
import { ElMessage, ElLoading } from "element-plus";
import { dataFormat } from "@/utils/format";
import { getCurrentInstance } from "vue";

const router = useRouter();
const { proxy } = getCurrentInstance();
const flightTaskStore = useFlightTaskStore();
const isBatchDeletion = ref(false);
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
];

const { airspace_focus, apply_Type, task_nature } = proxy.useDict(
  "airspace_focus",
  "apply_Type",
  "task_nature"
);
// 搜索参数
const params = reactive({
  applyName: null,
  aircraftId: null,
  airspaceApplyCode: null,
  mobile: null,
  taskName: "全部",
  focus: "3",
  applyType: "2",
  applyTime: null,
  approvalStatus: "",
  pageNum: 1,
  pageSize: 10,
});
const taskNameList = flightTaskStore.taskNameList;
const approvalStatusList = reactive([
  {
    label: "全部",
    value: "",
  },
  {
    label: "审核中",
    value: 0,
  },
  {
    label: "已通过",
    value: 1,
  },
  {
    label: "未通过",
    value: 2,
  },
]);

const applyList = ref([]);

const loading = ref(false);
const addNewVisible = ref(false);
const deleteVisible = ref(false);

const total = ref(0);

const dropDrone = ref();

const showDrone = () => {
  if (!dropDrone.value) return;
  dropDrone.value.handleOpen();
};

// -----------------------------------  获取列表数据  ----------------------------------
const getApplyList = async () => {
  try {
    loading.value = true;
    let beginCreateTime = null;
    let endCreateTime = null;
    let {
      applyName,
      aircraftId,
      taskName,
      applyTime,
      applyType,
      airspaceApplyCode,
      mobile,
      focus,
      approvalStatus,
      pageNum,
      pageSize,
    } = params;
    taskName = taskName === "全部" ? null : taskName;
    if (applyTime) {
      beginCreateTime = dataFormat(params.applyTime[0], "YYYY-MM-DD HH:mm");
      endCreateTime = dataFormat(params.applyTime[1], "YYYY-MM-DD HH:mm");
    }
    if (focus === "3") {
      focus = "";
    } else {
      focus = focus * 1;
    }
    if (applyType === "2") {
      applyType = "";
    } else {
      applyType = applyType * 1;
    }
    const res = await getAirApplyListApi(
      { pageNum, pageSize },
      {
        applyName,
        aircraftId,
        airspaceApplyCode,
        mobile,
        taskName,
        params: { beginCreateTime, endCreateTime },
        approvalStatus,
        focus,
        applyType,
      }
    );
    applyList.value = res.rows.map((item) => {
      item.deviceModelList = item.deviceModel.split(",");
      item.aircraftIdList = item.aircraftId.split(",");
      item["showSN"] = item.aircraftType === 0 || item.aircraftType === 4;
      return item;
    });
    total.value = res.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

/**
 * @重置
 * */
function resetSearch() {
  params.applyName = null;
  params.aircraftId = null;
  params.airspaceApplyCode = null;
  params.mobile = null;
  params.taskName = "全部";
  params.applyTime = null;
  params.focus = "3";
  params.applyType = "2";
  params.approvalStatus = "";
  params.pageNum = 1;
  params.pageSize = 10;
  getApplyList();
}
// -----------------------------------  删除数据  ----------------------------------
const willDeleteId = ref();
const willDeleteIds = ref([]);

const deletePrompt = (id) => {
  deleteVisible.value = true;
  if (id) {
    willDeleteId.value = id;
  }
};

const closeDelete = () => {
  deleteVisible.value = false;
  willDeleteId.value = null;
};

const deleteApply = async () => {
  let ids = willDeleteId.value || willDeleteIds.value;
  const res = await deleteApplyApi(ids);
  if (res.code === 200) ElMessage.success(res.msg);
  else ElMessage.error(res.msg);
  deleteVisible.value = false;
  willDeleteId.value = null;
  willDeleteIds.value = [];
  await getApplyList();
};
// -----------------------------------  多选框选中  ----------------------------------
function handleSelectionChange(selection) {
  isBatchDeletion.value =
    selection.length > 0 &&
    selection.every((item) => item.approvalStatus === 0);
  willDeleteIds.value = selection.map((item) => item.airspaceApplyId);
}
const createNewApplication = (
  applyType,
  openType,
  airspaceApplyId = undefined
) => {
  router.push({
    name: "EditAirspaceApply",
    query: { applyType, openType, airspaceApplyId },
  });
};

// -----------------------------------  序号  ----------------------------------
function indexMethod(index) {
  // 当前页码
  const currentPage = params.pageNum;
  // 每页显示的数据条数
  const pageSize = params.pageSize;
  // 当前行的实际索引
  const truelndex = (currentPage - 1) * pageSize + index + 1;
  // 如果当前行的索引大于等于当前页的最大索引，
  // 则使用当前行的实际索引，否则使用当前行的原始索引
  return truelndex;
}

onMounted(() => {
  getApplyList();
});
</script>

<style lang="scss">
.airspaceApplication {
  .codeTable {
    // margin: 0 30px;
    width: 100%;
  }

  .codeTable .el-table__body-wrapper tbody tr td:nth-child(5) {
    text-align: left;
  }

  // .codeTable .el-table__body-wrapper tbody tr {
  //   td {
  //     text-align: left;
  //   }
  //   td:nth-child(1),
  //   td:nth-child(2),
  //   td:nth-child(3),
  //   td:nth-child(4) {
  //     text-align: center !important;
  //   }
  // }

  .apply-dialog .el-dialog__header {
    display: none !important;
  }

  .apply-dialog.el-dialog {
    top: 207px;
    width: 500px !important;
    height: 318px;
    border-radius: 20px;
    padding: 80px;

    .el-dialog__body {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .createOption {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 158px;
        cursor: pointer;

        &:hover {
          background: rgba(0, 0, 0, 0.015);
        }

        .person {
          width: 120px;
          height: 120px;
          margin-bottom: 12px;
          background: url("@/assets/images/person.png");
        }

        .company {
          width: 120px;
          height: 120px;
          margin-bottom: 12px;
          background: url("@/assets/images/company.png");
        }

        .title {
          font-size: 18px;
          color: rgba(56, 56, 56, 1);
          text-align: right;
          vertical-align: top;
        }
      }
    }
  }

  .search-item .search-input .el-input,
  .search-time .el-date-editor {
    height: 40px !important;
  }
}
</style>

<style scoped lang="scss">
.airspaceApplication {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;

    .pagination {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
    }
  }

  .search-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 0;
    width: 100%;
    height: 210px;
    border-radius: 10px;
    background-color: #fff;
  }

  .search-argument {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 15px;

    .search-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 24%;
      height: 40px;

      .search-input {
        flex: 1;
        width: 270px;
        height: 40px;
      }

      .search-time {
        flex: 1;
        width: 270px;
        height: 40px;
      }
    }

    .labelName {
      display: inline-block;
      width: 110px;
      text-align: right;
      font-size: 14px;
      margin-right: 15px;
    }

    .search-button {
      position: absolute;
      right: 0px;
      top: -45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 160px;
      height: 40px;
    }
  }

  .batch-operation {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    right: 180px;
    top: -45px;
    height: 40px;
  }

  .tag {
    display: inline-block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 15px;
    color: rgba(153, 153, 153, 1);
    // border: 1px solid rgba(153, 153, 153, 1);
  }
  .tag.warning {
    color: rgba(255, 149, 18, 1);
    // border: 1px solid rgba(255, 149, 18, 1);
  }
  .tag.success {
    color: rgba(43, 193, 123, 1);
    // border: 1px solid rgba(43, 193, 123, 1);
  }

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    padding: 10px;
    font-size: 14px;
    border-radius: 4px;
    user-select: none;
    cursor: pointer;
  }
  .btn.search {
    color: #fff;
    background: rgba(43, 193, 123, 1);
    &:hover {
      background: rgba(43, 193, 123, 0.85);
    }
  }

  .btn.reset {
    color: #fff;
    background: rgba(255, 183, 0, 1);
    border: 1px solid rgba(255, 183, 0, 1);
    &:hover {
      background: rgba(255, 183, 0, 0.7);
    }
  }

  .btn.remove {
    color: #fff;
    background: rgba(227, 56, 56, 1);
    border: 1px solid #e33838;
    &:hover {
      background: rgba(227, 56, 56, 0.6);
    }
  }
  .btn.cantUse {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(227, 56, 56, 0.2);
    border: 1px solid rgba(227, 56, 56, 0.2);
    cursor: not-allowed;
  }

  .icon {
    margin-right: 6px;
  }
}
</style>
